<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝1</title>    
    <style>
        *{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
html,body {
    width: 100%;
    height: 100%;
}
.yty {
    width: 100%;
    height: 100%;
}
.yty .top11{
    
    height:30px; 
    width:100%;
    margin-left: 0;
   
    position: fixed; 
    top: 0;
    margin-bottom: 5px;
}
.top11 ul{
    width: auto;
    list-style-type: none;
    white-space:nowrap;
    overflow: hidden;
    margin-left: 5%;
    padding: 0;

}
.top11 li {
    float:left; 
    margin-right:2%;  
    position: relative;
    overflow: hidden;
    font-size: 16px;
}

.top11 li a{
    display: block; 
    color:rgb(0, 0, 13);
    text-align: center;
    padding: 3px;
    overflow: hidden;
    text-decoration: none; 
    
}
.top11 li a:hover{
  
    background-color: rgb(13, 152, 245);
}
.top11 ul li ul{
   
    margin-left: -0.2px;
    background:rgb(189, 181, 181);
    position: relative;
    display: none; 

}
.top11 ul li ul li{
 
    
    float:none;
    text-align: center;
}
.top11 ul li:hover ul{
  
    display: block;
}


.yty .search-wrap {
    width: 100%;
    height: 97px;
    padding-top: 24px;
    background-color: #fff;
}
.yty .search-wrap .search {
    width: 1190px;
    height: 88px;
    margin: 0 auto;
    position: relative;
}
.yty .search-wrap .search .logo-box{
    position: relative;
  
    float: left;
    width: 190px;
    height: 90px;
    background: url('images/logo.png') no-repeat;
    margin-right: 50px;
}
.yty .search-wrap .search .search-box {
    float: left;
    width: 627px;
    height: 87px;
}
.yty  .search-box .search-t{
    width: 627px;
    height: 62px;
}
.yty .search-box .search-t .select {
    height: 22px;
    margin-left: 17px;
}
.yty .search-box .search-t .select ul li{
    float: left;  
    width: 36px;
    height: 22px;
    color: #f40;
    font-size: 12px; 
    line-height: 22px;
    text-align: center;
    margin-right: 4px;
    border-top-right-radius:6px;
    border-top-left-radius: 6px; 
    cursor: pointer;
}
.yty .search-box .search-t .select ul li:hover{
    background-color: #ffeee5;
}
.yty .search-box .search-t .select ul .current{
    background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
    color: #fff;
    font-weight: 700;
}
.search-box .search-t .search-mian {
    position: relative;
    width: 627px;
    height: 40px;
}
.search-box .search-t .search-mian .fdj{
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('images/fdj.png') no-repeat;
    position: absolute;
    top: 15px;
    left: 10px;  
}
.search-box .search-t .search-mian .cameral{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('images/camera.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 11px;
    right: 90px;  
}
.search-box .search-t .search-mian .search-inp-box{
    width: 551px;
    height: 36px;
    border: 2px solid #ff5000;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.search-box .search-t .search-mian .search-inp{
    width: 472px;
    height: 36px;
    line-height: 36px;
    padding-left: 5px;
}
.search-box .search-t .search-mian .search-inp input{
    width:472px;
    height: 24px;
    padding-left: 5px;
    text-indent: 1em;
    border: none;
    outline: none;
}
.search-box .search-t .search-mian .btn{
    width: 74px;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0; 
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;  
}
.search-box .search-t .search-mian .submit {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
    border:none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    font-weight: 700;  
}

.yty .search-box .search-b{
    width: 627px;
    height: 20px;
}
.yty .search-box .search-b a{
    margin-left: 8px;
    font-size: 12px;
    color: #666;   
}
.yty .search-box .search-b a.active,
.yty .search-box .search-b a:hover
{
    color: #ff5500;
}
.yty .search-wrap .search .ewm-box{
    width: 76px;
    height: 90px;
    float: left;
    margin-left: 120px;
    position: relative;
}
.yty .search-wrap .search .ewm-box #phone{
    color: #ff5000;
    font-size: 14px;
    line-height: 20px;
    margin-left: 6px;
}
.yty .search-wrap .search .ewm-box #ewm{
    width: 62px;
    height: 62px;
    display: inline-block;
    background: url('images/ewm.png')no-repeat;
    background-size: 100% 100%;
    margin-left: 6px;
}
.yty .search-wrap .search .ewm-box .xh{
    position: absolute;
    width: 16px;
    height: 16px;
    color: #ddd;
    font-size: 14px;
    text-align: center;
    border: 1px solid #eee;
    top: 0;
    left: -18px;
}
.yty  .screen-nav {
    width: 1190px;
    height: 30px;
    background-image:linear-gradient(to right,#ff9900 0 ,#ff5500 100%); 
    margin:  0 auto;
}
.yty .screen-nav .screen-nav-con{
    width: 100%;
    height: 100%;
}
.yty .screen-nav .screen-nav-con  h2{
    width: 190px;
    height: 100%; 
    color: #fff;   
    font-size: 16px;
    text-align: center;  
    background-color: #ff5000;
    line-height: 30px;
    float: left; 
}
.yty .screen-nav .screen-nav-con ul{
    float: left;
}
.yty .screen-nav .screen-nav-con ul li{
    float: left;
    margin: 0 4px;
    padding: 0 4px;
    position: relative;
}
.yty .screen-nav .screen-nav-con ul li a{
   font-size: 16px;
   color: #fff;  
   line-height: 30px;
   font-weight: 700;
}
.yty .screen-nav .screen-nav-con ul li:hover::before{
    content:"";  
    display: block;
    width: 30px;
    height: 30px;
    background:url('images/up.png') no-repeat;
    background-size: center center;
    position: absolute;
    top: -11px;
    left: 50%;
    margin-left:-15px;
}
.yty .screen-box {
    width: 1190px;
    height: 632px;
    margin: 0 auto;
}
.yty .screen-box .mian{
    width: 890px;
    height: 632px;
    float: left;
}
.yty .screen-box .mian .mian-inner{
    width: 890px;
    height: 522px;
}
.yty .screen-box .mian .mian-inner .inner-lf{
    width: 190px;
    height: 100%;
    border: 1px solid #f40;
    border-top:none;
    float: left;
    background-color: #fff;  
}
.yty .screen-box .mian .mian-inner .inner-lf li{
    width:150px;
    height:32px;
    padding-left: 25px;
    padding-right: 14px;
    position: relative;
}
.yty .screen-box .mian .mian-inner .inner-lf li:hover{
    background-color: #ffe4dc;
}
.yty .screen-box .mian .mian-inner .inner-lf li:hover a{
    color: #ff5000;
}
.yty .screen-box .mian .mian-inner .inner-lf li a{
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 32px;
    text-align: center;
}
.yty .screen-box .mian .mian-inner .inner-lf li span{
    display: inline-block;
    width:5px;
    height: 8px;
    position: absolute;
    right: 5px;
    top: 12px;
    background: url('images/yjt.png') no-repeat;
    background-size: 100% 100%;
}
.yty .screen-box .mian .mian-inner .inner-cer{
    width: 520px;
    height: 100%;
    float: left;
}
.yty .screen-box .mian .mian-inner .inner-cer .pic-box{
    padding: 8px;
    padding-right:0;
}
.yty .screen-box .mian .mian-inner .inner-bt{
    width: 520px;
    height: 230px;
    padding: 0 8px;
}
.yty .screen-box .mian .mian-inner .inner-bt span{
    font-size: 12px;
    color: #666;
}

.yty .screen-box .mian .mian-inner .inner-rt {
    padding: 8px;
    width: 160px;
    height: 520px;
    float: left;
}

.yty .screen-box .mian .mian-inner .inner-rt .hot
{   
    font-size: 12px;
}
.yty .screen-box .mian .mian-bottom{
    width: 890px;
    height: 110px;
}
.yty .screen-box .mian .mian-bottom .content{
    background-color: #fff;
    padding: 14px 12px;
    margin-top:10px;
    position: relative;
}
.yty .screen-box .mian .mian-bottom .content .logo{
    width: 180px;
    height: 73px;
    background: url('images/tbtt.png') no-repeat;
    background-size: 100% 100%;
}
.yty .screen-box .mian-bottom .content a{
    position: absolute;
    top : 0;
    left: 200px;
}
.yty .screen-box .mian-bottom .content img{
    float: left;
}
.yty .screen-box .mian-bottom .content h4{
    margin: 2px 0 8px 144px;
    height: 28px;
    line-height: 28px;
    font-size: 16px;
    color: #333;
}
.yty .screen-box .mian-bottom .content h4:hover{
    color: #ff5000;
}
.yty .screen-box .mian-bottom .content p{
    margin-left: 144px;
    height: 36px;
    line-height: 14px;
    font-size: 16px;
    overflow: hidden;
    color: #999;
}
.yty .screen-box .box-right{
    width: 290px;
    height: 632px;
    float: left;
    margin-left: 8px;
}
.yty .screen-box .box-right .member{
    width: 290px;
    height: 132px;
    background: url('images/bg.png') no-repeat;
    background-size: 100% 100%;
}
.yty .screen-box .box-right .member .member-head{
    width: 290px;
    height: 91px;
}
.yty .screen-box .box-right .member-head .head{
    width: 290px;
    height: 56px;
    position: relative;
}
.yty .screen-box .box-right .member-head .head a{
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 50%;
    background: url('images/tx.jpg') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -25px;
}
.yty .screen-box .box-right .member-head .hello{
    display: inline-block;
    width: 290px;
    height: 17px;
    line-height: 17px;
    font-size: 12px;
    columns: #3c3c3c;
    text-align: center;
}
.yty .screen-box .box-right .member-head p{
    height: 17px;
    line-height: 17px;
    text-align: center;
}
.yty .screen-box .box-right .member-head p a{
    display: inline-block;
    width: 72px;
    height: 17px;
    border-radius: 6px;
    background-color: #ffe4dc;
    line-height: 17px;
    font-size: 12px;
    font-weight: 700;
    color: #f40;
    padding-left: 20px;
    padding-right: 8px;
    position: relative;
}  
.yty .screen-box .box-right .member-head p span{
    display: inline-block;
    width:16px;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
}  
.yty .screen-box .box-right .member-head p .tb{
    background: url('images/pics.png')  no-repeat; 
    background-position: 0 -572.5px;   
}
.yty .screen-box .box-right .member-head p .meb{
    background: url('images/pics.png')  no-repeat;    
    background-position: 0 -528px;
}
.yty .screen-box .box-right .member-foot{
    width: 290px;
    height: 30px;
    padding-top: 10px;
    text-align: center;
}
.yty .screen-box .box-right .member-foot a{
    display: inline-block;
    width: 75px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    color: #fff;
    margin: 0 6px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    background-image: linear-gradient(to right,#ff9900 0,#ff5500 100%);
}
.yty .screen-box .box-right .massage{
    width: 290px;
    height: 26px;
}
.yty .screen-box .box-right .massage a{
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 26px;
    text-align: center;
    font-size: 12px;
    color: #ff5500;
    position: relative;
    background-color: #ffe4dd;
}
.yty .screen-box .box-right .massage span{
    position: absolute;
    right: 52px;
    top: 10px;
    width: 8px;
    height: 8px;
    background: url('images/ysj.png') no-repeat;
    background-size: 100% 100%;
}
.yty .screen-box .box-right .notice{
    width: 290px;
    height: 98px;
    padding-top: 10px;
}
.yty .screen-box .box-right .notice .title{
    width: 270px ;
    height: 24px;
    padding-left: 20px;
}
.yty .screen-box .box-right .notice .title ul li{
    float: left;
    width: 45px;
    height: 24px;
    text-align: center;
    margin-right: 6px;
}
.yty .screen-box .box-right .notice .title ul li a{
    font-size: 13px;
    color: #000;
    line-height: 24px;  
    padding: 0 2px;
}
.yty .screen-box .box-right .notice .title ul li a.active{
    border-bottom:2px solid #ff5000;
}

.yty .screen-box .box-right .notice .content{
    width: 100%;
    padding: 9px;
    box-sizing: border-box;
}
.yty .screen-box .box-right .notice .content li{
    float: left;
    width: 130px;
    height: 25px;
    padding-right: 3px;
}
.yty .screen-box .box-right .notice .content li a{
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    color: #000;
}
.yty .screen-box .box-right .notice .title ul li a:hover,
.yty .screen-box .box-right .notice .content li a.active,
.yty .screen-box .box-right .notice .content ul li a:hover{
    color: #ff5500;
}
.yty .screen-box .box-right .mobule {
    width: 290px;
    height: 230px;
} 
.yty .screen-box .box-right .mobule li{
    float: left;
    width: 70px;
    height: 72px;
    border: 1px solid #f4f4f4;
}
.yty .screen-box .box-right .mobule li:hover{
    border: 1px solid #ff5500;
}
.yty .screen-box .box-right .mobule li:hover p{
    color: #ff5500;
}
.yty .screen-box .box-right .mobule li a{
    display: inline-block;
    padding-top: 15px;
    width: 100%;
    height: 100%;
    text-align: center;
    box-sizing:border-box;
}
.yty .screen-box .box-right .mobule li a span{
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('images/pics.png') no-repeat;
} 
.yty .screen-box .box-right .mobule li a span.peiqi1{
    background-position: 0 0;
}
.yty .screen-box .box-right .mobule li a span.peiqi2{
    background-position: 0 -44px;
}
.yty .screen-box .box-right .mobule li a span.peiqi3{
    background-position: 0 -88px;
}
.yty .screen-box .box-right .mobule li a span.peiqi4{
    background-position: 0 -172px;
}
.yty .screen-box .box-right .mobule li a p{
    color: #000;
    font-size: 12px;
}
.yty .screen-box .box-right .app h3{
    font-size: 14px;
    line-height: 30px; 
    padding-left: 10px; 
    position: relative;
}
.yty .screen-box .box-right .app h3 .many{
    position: absolute;
    right: 20px;
    font-size: 13px;
    height: 15px;
    color: #333;
    font-weight: 300;
}
.yty .screen-box .box-right .app h3 .many:hover{
    color: #ff5000;
}  
.yty .screen-box .box-right .app li{
    float: left;
    width: 32px;
    height:32px;
    margin: 10px;
} 
.yty .screen-box .box-right .app li img{
    width: 100%;
    height: 100%;
}

    </style>

</head>
<body>
    <div class="yty">
            <div class="top11">
                <center> 
                 <ul>
                    <li>
                        <a href="#">中国大陆</a>
                        <ul>
                            <li><a href="#">美国</a></li>
                            <li><a href="#">英国</a></li>
                            <li><a href="#">法国</a></li>
                            <li><a href="#">意大利</a></li>
                        </ul>
                    </li>        
                 <li><a href="#" style="color: red;">亲，请登录</a></li>
                 <li><a href="#">免费注册</a></li>
                 <li><a href="#">手机逛淘宝</a></li>
                 <li>
                    <a href="#" style="margin-left: 200px;" >我的淘宝</a>
                    <ul>
                        <li><a href="#">已买到的淘宝</a></li>
                        <li><a href="#">我的淘宝</a></li>
                    </ul>
                </li>        
                <li><a href="#">购物车</a></li>
                <li><a href="#">收藏夹</a></li>
                <li><a href="#">商品分类</a></li>
                <li><a href="#">免费开店</a></li>
                <li><a href="#">千牛卖家中心</a></li>
                <li><a href="#">联系客服</a></li>
        
                <li>
                    <a href="#">联系客服</a>
                    <ul>
                        <li><a href="#">电话</a></li>
                        <li><a href="#">微信</a></li>
                    </ul>
                </li> 
                <li><a href="#">网站导航</a> </li>      
                   </ul>
                 </center>      
         </div>
        
        <div class="search-wrap">
            <div class="search">
                <div class="logo-box"></div>        
                <div class="search-box">
                    <div class="search-t">
                        <div class="select">
                            <ul>
                                <li class="current">宝贝</li>
                                <li>天猫</li>
                                <li>店铺</li>
                            </ul>
                        </div>
                        <div class="search-mian">
                            <a href="#" class="fdj"></a>
                            <form action="">
                                <div class="search-inp-box">
                                    <div class="search-inp">
                                        <input type="text" placeholder="荣耀10降价">
                                    </div>
                                </div>
                                <div class="btn">
                                   <button class="submit">搜索</button>
                                </div>
                            </form>
                            <a href="#" class="cameral"></a>
                        </div>
                    </div>
                    <div class="search-b">
                        <a href="#" class="active">口红</a>
                        <a href="#" class="active">眼霜</a>
                        <a href="#">面膜</a>
                        <a href="#">夹克</a>
                        <a href="#">衬衫</a>
                        <a href="#"class="active">牛仔裤</a>
                        <a href="#">沙发</a>
                        <a href="#">护肤品</a>
                        <a href="#"class="active">男士外套</a>
                        <a href="#">男鞋</a>
                        <a href="#">化妆品</a>
                        <a href="#" class="active">休闲裤</a>
                    </div>
                </div>
                <div class="ewm-box">
                    <a href="#" id="phone">去领红包</a>
                    <a href="#"id="ewm"><img src="二维码.png" alt="" style="width: 75px;height: 75px;"> </a>
                    <a href="#"class="xh">X</a>
                </div>           
            </div>
        </div>
        <div class="screen-nav">
            <div class="screen-nav-con">
                    <h2>主题市场</h2>
                    <ul>
                        <li><a href="#">天猫</a></li>
                        <li><a href="#">聚划算</a></li>
                        <li><a href="#">天猫超市</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">|</a></li>
                        <li><a href="#">淘抢购</a></li>
                        <li><a href="#">电器城</a></li>
                        <li><a href="#">司法拍卖</a></li>
                        <li><a href="#">淘宝精选</a></li>
                        <li><a href="#">兴隆抚贫</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">|</a></li>
                        <li><a href="#">飞猪旅行</a></li>
                        <li><a href="#">智能生活</a></li>
                        <li><a href="#">苏宁易购</a></li>
                    </ul>
            </div>
        </div>
        <div class="screen-box">
            <div class="mian">
                <div class="mian-inner">
                    <div class="inner-lf">
                        <ul>
                            <li>
                                <a href="#">女装/</a>
                                <a href="#">男装/</a>
                                <a href="#">内衣</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">鞋靴/</a>
                                <a href="#">箱包/</a>
                                <a href="#">配件</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">家电/</a>
                                <a href="#">数码/</a>
                                <a href="#">手机</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">童装玩具/</a>
                                <a href="#">孕产/</a>
                                <a href="#">用品</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">美妆/</a>
                                <a href="#">洗护/</a>
                                <a href="#">保健品</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">饰品/</a>
                                <a href="#">珠宝/</a>
                                <a href="#">手表眼镜</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">运动/</a>
                                <a href="#">户外/</a>
                                <a href="#">乐器</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">游戏/</a>
                                <a href="#">动漫/</a>
                                <a href="#">影视</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">美食/</a>
                                <a href="#">生鲜/</a>
                                <a href="#">零食</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">鲜花/</a>
                                <a href="#">宠物/</a>
                                <a href="#">农资</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">工具/</a>
                                <a href="#">装修/</a>
                                <a href="#">建材</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">家具/</a>
                                <a href="#">家饰/</a>
                                <a href="#">家纺</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">汽车/</a>
                                <a href="#">二手车/</a>
                                <a href="#">用品</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">办公/</a>
                                <a href="#">DIY/</a>
                                <a href="#">五金电子</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">百货/</a>
                                <a href="#">餐厨/</a>
                                <a href="#">家庭保健</a>
                                <span></span>
                            </li>
                            <li>
                                <a href="#">学习/</a>
                                <a href="#">卡卷/</a>
                                <a href="#">本地服务</a>
                                <span></span>
                            </li>
                        </ul>
                    </div>
                    <div class="inner-cer">
                        <div class="pic-box">
                            <img src="轮播图1.png" alt="" style="width: 500px;height: 300px;">
                        </div>
                        <div class="inner-bt">
                            <div class="head">
                                <img src="图2.png" alt="">
                                <span>理想生话上天猫</span>
                            </div>
                            <a href="#">
                              
                            </a>
                        </div>
                    </div>
                    <div class="inner-rt">
                       
                        <div class="hot">
                            <img src="家居建材.png" alt="" style="width: 150px;height: 300px;">
                            <a href="#">                               
                            </a> 
                        </div>
                    </div>
                </div>
                <div class="mian-bottom">
                    <div class="content">
                        <div class="logo"></div>
                        
                    </div>
                </div>
            </div>
            <div class="box-right">
                <div class="member">
                    <div class="member-head">
                        <div class="head">
                            <a href="#">
                                <span></span>
                                
                            </a>
                            <img src="你好.png" alt="" style="width:300px;height: 75px;">                            
                        </div>
                        <span class="hello"> hi! 你好</span>
                        <p>
                            <a href="#">
                                <span class="tb"></span>
                                领淘金币抵钱
                            </a>
                            <a href="#">
                                <span class="meb"></span>
                                会员俱乐部
                            </a>
                        </p>
                    </div>
                    <div class="member-foot">
                        <a href="#" class="login">登录</a>
                        <a href="#" class="">注册</a>
                        <a href="#" class="">开店</a>
        
                    </div>
                </div>
                <div class="massage">
                    <a href="#">
                        网上有害信息举报
                        <span></span>
                    </a>
                </div>
                <div class="notice">
                    <div class="title">
                        <ul>
                            <li>
                                <a href="#" class="active">公告</a>
                            </li>
                            <li>
                                <a href="#">规则</a>
                            </li>
                            <li>
                                <a href="#">论坛</a>
                            </li>
                            <li>
                                <a href="#">安全</a>
                            </li>
                            <li>
                                <a href="#">公益</a>
                            </li>
                        </ul>
                    </div>
                    <div class="content">
                        <ul>
                            <li>
                                <a href="#" class="active">
                                    卖家如何设置公益宝贝
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    公益项目如何加入公益
                                </a>
                            </li>
                            <li>
                                <a href="#" class="active">
                                    四重曝光! 请你出道~
                                </a>
                            </li>
                            <li>
                                <a href="#">公益机构开店攻略</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="mobule">
                    <ul>
                        <li>
                            <a href="#">
                                <span class="peiqi1"><img src="手机.png" alt=""></span>
                                <p>充话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="peiqi2"><img src="电影.png" alt=""></span>
                                <p>旅行</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="peiqi3"><img src="电影.png" alt=""></span>
                                <p>车险</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="peiqi4"><img src="电影.png" alt=""></span>
                                <p>游戏</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="peiqi5"><img src="电影.png" alt=""></span>
                                <p>彩票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="peiqi6"><img src="电影.png" alt=""></span>
                                <p>电影</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="peiqi7"><img src="电影.png" alt=""></span>
                                <p>酒店</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="peiqi8"><img src="电影.png" alt=""></span>
                                <p>理财</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="peiqi9"><img src="电影.png" alt=""></span>
                                <p>找服务</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="peiqi10"><img src="电影.png" alt=""></span>
                                <p>演出<
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="peiqi11"><img src="手机.png" alt=""></span>
                                <p>水电费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="peiqi12"><img src="手机.png" alt=""></span>
                                <p>火车票</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="app">
                    <h3>阿里App
                        <a href="#" class="many">更多></a>
                    </h3>
                    <ul>
                        <li><a href="#"><img src="淘宝.jpg" alt=""></a></li>
                        <li><a href="#"><img src="天猫.jpg" alt=""></a></li>
                        <li><a href="#"><img src="支付宝.jpg" alt=""></a></li>
                        <li><a href="#"><img src="草莓.jpg" alt=""></a></li>
                        <li><a href="#"><img src="天线.png" alt=""></a></li>
                        <li><a href="#"><img src="箱子.png" alt=""></a></li>
                        <li><a href="#"><img src="元宝.png" alt=""></a></li>
                        <li><a href="#"><img src="智能家电.png" alt=""></a></li>
                        <li><a href="#"><img src="电影.png" alt=""></a></li>
                        <li><a href="#"><img src="手机.png" alt=""></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        var in2=document.querySelector('#ewm');
        var in1=document.querySelector('#phone');
        in1.onclick=function(){
        in2.style.display='none';       
        }
       
        </script>
</body>
</html>